<template>
  <div>
    <h2>App</h2>
    <!-- <my-left></my-left>
    <my-right></my-right> -->
    <button @click="comName='MyLeft'">展示left</button>
    <button @click="comName='MyRight'">展示right</button>
    <!-- 动态组件：使用component标签，:is属性，属性值是组件名 -->
    <!-- 给动态组件包一层Keep-alive，可以保持组件不被销毁，可以保持组件的状态 -->
    <!-- include指定组件保持状态 -->
    <!-- exclude指定哪些组件不需要保持状态，不指定的就会缓存 -->
    <keep-alive include="MyLeft,MyRight">
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyRight from './components/MyRight.vue';
import MyLeft from './components/MyLeft.vue';
export default {
  components: { MyLeft, MyRight },
  data(){
    return{
      comName:'MyLeft'
    }
  }
};
</script>

<style></style>
